<!--
 * @Author: your name
 * @Date: 2020-09-02 11:14:32
 * @LastEditTime: 2020-09-24 17:18:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\components\forms\index.vue
-->
<template>
  <!-- 不可修改文本框 -->
  <el-form-item :label="formItem.Label" v-if="formItem.Type === 'hidden'">
    <el-input placeholder="不可编辑修改" v-model="data[formItem.Key]" :disabled="true"></el-input>
  </el-form-item>
  <!-- 文本框 -->
  <el-form-item :label="formItem.Label" v-if="formItem.Type === 'input'">
    <el-input  v-model="data[formItem.Key]" clearable></el-input>
  </el-form-item>
  <!-- 密码文本框 -->
  <el-form-item :label="formItem.Label" v-if="formItem.Type === 'password'">
    <el-input placeholder="请输入密码" v-model="data[formItem.Key]" clearable show-password></el-input>
  </el-form-item>
  <!-- 数字型文本框 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'number'">
    <el-input type="number" v-model="data[formItem.Key]" clearable></el-input>
  </el-form-item>
  <!-- switch按钮 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'switch'">
    <el-switch style="width:100%" :active-value = 1 :inactive-value = 0 v-model="data[formItem.Key]"></el-switch>
  </el-form-item>
  <!-- radio单选按钮 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'radio'">
      <el-radio v-model="data[formItem.Key]" :label="items.Value" v-for="items in formItem.Options" :key="items.Value" >{{items.Name}}</el-radio>
  </el-form-item>
  <!-- 文本域textarea -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'textarea'">
    <el-input
      clearable
      resize="none"
      type="textarea"
      :rows="2"
      :placeholder="formItem.Placeholder"
      v-model="data[formItem.Key]">
    </el-input>
  </el-form-item>
  <!-- 单选下拉框 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'OnceSelect'">
    <el-cascader filterable placeholder="输入文字进行搜索" style="width:100%"
    :options="formItem.Options"
    :props="{children: 'ChildRen', value: 'Value', label:'Label', checkStrictly: true}"
    collapse-tags
    v-model="data[formItem.Key]"
    ></el-cascader>
  </el-form-item>
  <!-- 多选下拉框 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'select'">
    <el-cascader filterable placeholder="输入文字进行搜索" style="width:100%;"
    :options="formItem.Options"
    :props="{children: 'ChildRen', value: 'Value', label:'Label', multiple:true}"
    collapse-tags
    v-model="data[formItem.Key]"
    ></el-cascader>
  </el-form-item>
  <!-- 自由块下拉框 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'FreeBlockSelect'">
    <!-- {{data[formItem.Key]}}
    <el-cascader filterable placeholder="输入文字进行搜索" style="width:100%"
    :options="formItem.Options.Options"
    :props="{children: 'ChildRen',value: 'Value', label:'Label'}"
    collapse-tags
    @change="SelectOption"
    v-model="data[formItem.Key]"
    ></el-cascader> -->
     <el-select
      @change="SelectOption"
      v-model="data[formItem.Key]"
      filterable
      collapse-tags
      placeholder="输入文字进行搜索" style="width:100%">
      <el-option v-for="item in formItem.Options.Options"
      :key="item.Value"
      :label="item.Label"
      :value="item.Value"
      ></el-option>
    </el-select>
  </el-form-item>
  <!-- 单图上传 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'onlyUploadImage'" @click="SelectImages(true,1)">
    <template  v-if="data[formItem.Options] != undefined && data[formItem.Options].length != 0" >
      <el-image
        v-for="imgItems in data[formItem.Options]" :key="imgItems.FileId"
        :src="BASE_IMAGE_URL + imgItems.FileName"
        class="avatar">
      </el-image>
    </template>
    <i v-else
    @click="SelectImages(true,1)"
    class="el-icon-plus avatar-uploader-icon"
    style="border:solid 1px #ccc;font-size:30px;padding:48px;">
    </i>
  </el-form-item>
  <!-- 多图上传 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'multipleUploadImage'">
    <template  v-if="data[formItem.Options] != undefined && data[formItem.Options] != 0">
      <el-image
        v-for="imgItems in data[formItem.Options]" :key="imgItems.FileId"
        :src="BASE_IMAGE_URL + imgItems.FileName"
        class="avatar">
      </el-image>
    </template>
    <i
    @click="SelectImages(true,null)"
    class="el-icon-plus avatar-uploader-icon el-image avatar"
    style="border:solid 1px #ccc;font-size:30px;padding:48px;">
    </i>
  </el-form-item>
  <!-- 图标选择器 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'icon'">

  </el-form-item>
  <!-- Kindeditor富文本编辑器 -->
  <!-- <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'kindeditor'">
    <Kindeditor v-model:content="data[formItem.Key]" />
  </el-form-item> -->
  <!-- Markdown富文本编辑器 -->
  <el-form-item :label="formItem.Label" v-else-if="formItem.Type === 'markdown'">
    <!-- {{formItem.Key}} -->
    <MarkDownEditor
    :Content="data[formItem.Key]"
    @SaveMarkDown="SaveMarkDown"
    />
  </el-form-item>
  <UploadDialog
  :UploadDialogVisible="UploadDialogVisible"
  :CheckLimit="CheckLimit"
  :Checked="Checked"
  @SaveUploadFile="SaveUploadFile"
  @CancelUploadFile="CancelUploadFile"
  />

</template>

<script>
// import CustomSwitch from './custom-switch';
// import Kindeditor from '@/components/editor/kindeditor/index';
import MarkDownEditor from '@/components/editor/markdown/index'
import { reactive, ref } from 'vue';
import UploadDialog from '../upload/upload-file-dialog';
import { BASE_IMAGE_URL } from '../../utils/config';
export default {
  name: 'FormItem',
  components: {
    // CustomSwitch,
    MarkDownEditor,
    // Kindeditor,
    UploadDialog
  },
  props: {
    formItem: {
      type: Object,
      default: () => {}
    },
    form: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Object,
      default: () => {}
    },
    Checked: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    let SelectArr = []
    let Checked = Array.isArray(props.Checked)?props.Checked:reactive([])
    let CheckLimit = ref(1)
    let UploadDialogVisible = ref(false)
    if(props.formItem.Type === 'select')
    {
      SelectArr = props.data.Select
    }

    // 图库选择的完毕
    function SaveUploadFile(){
      UploadDialogVisible.value = false
      if(CheckLimit == 1){
        props.data[props.formItem.Key] = Checked[0]
        props.data[props.formItem.Options] = Checked[0]
      }else
      {
        props.data[props.formItem.Key] = Checked
        props.data[props.formItem.Options] = Checked
      }
    }
    // 图库关闭
    function CancelUploadFile(){
      UploadDialogVisible.value = false
    }

    function SaveMarkDown(item){
      props.data[props.formItem.Key] = item
    }

    function SelectOption(index){
      let opIndex = index
      for(let i = 0; i < props.form.length; i++)
      {
        if(props.form[i].Key === props.formItem.Options.Forms[opIndex].Key)
        {
          let result = props.formItem.Options.Forms[opIndex];
          props.form[i] = result
          props.data[props.form[i].Options] = reactive()
        }
      }
      // if(props.formItem.Options.Forms[opIndex].Type == "multipleUploadImage")
      // {
      //   let arr = []
      //   // props.data[props.formItem.Options.Filed] = arr
      //   CheckLimit.value = null
      // }else if(props.formItem.Options.Forms[opIndex].Type == "onlyUploadImage")
      // {
      //   let arr = []
      //   // props.data[props.formItem.Options.Filed] = arr
      //   CheckLimit.value = 1
      // }
    }

    function SelectImages(Visible,Limit)
    {
      UploadDialogVisible.value = Visible
      CheckLimit.value = Limit
    }
    return {
      SelectArr,
      Checked,
      BASE_IMAGE_URL,
      SaveUploadFile,
      CancelUploadFile,
      UploadDialogVisible,
      SaveMarkDown,
      SelectOption,
      CheckLimit,
      SelectImages
    };
  }
};
</script>
<style scoped>
.avatar{
  width: 140px;
  height: 140px;
  margin:0 5px;
}
.el-popper__arrow{
  display: none !important;
}
</style>
